

window.onload =function(){
	//检测是否支持stylesheet样式表，链接式为内联式
	//alert(document.implementation.hasFeature('stylesheet','2.0'));//true
	
	var link = document.getElementsByTagName('link')[0];
	
	
	
	//alert(link);//[object HTMLLinkElement]
	//var sheet = link.sheet;// 表示链接的css样式表对象,但是不兼容ie
	//alert(sheet)//[object CSSStyleSheet]
	
	//兼容ie
	var sheet = link.sheet ||link.stylesheet;
//	alert(sheet);
	
	//document直接得到sheet的方法，兼容所有的浏览器
	var sheet = document.styleSheets[0]; //得到的是[object StyleSheetList]的集合
//	alert(sheet);
	
/*	alert(sheet.disabled =true);//默认false, 修改为true表示禁用
	
	alert(sheet.media[0]);
	alert(sheet.title);*/
	
	alert(sheet.href);//http://127.0.0.1:8020/JavaScriptText/css/21DOM04.css
	
	//ie不支持cssRules
	alert(sheet.cssRules);//[object CSSRuleList]  样式规则集合
	//样式的规则就是一群样式的集合表示一个规则
	alert(sheet.cssRules[0]);//第一个规则  [object CSSStyleRule]
	alert(sheet.cssRules[0].cssText);//得到第一个规则的css文本     #box { font-size: 20px; color: red; background: rgb(204, 204, 204); }
	alert(sheet.cssRules[0].selectorText);//得到第一个规则的选择符   #box
	//
	alert(sheet.cssRules[0].style.color);//red
    sheet.cssRules[0].style.color = 'orange';
    
    
	alert(sheet.deleteRule(0))//删除第一个
	
	sheet.insertRule('body {background-color:red}',0)//在第一个位置添加一个样式规则
	//ps ie自己的方式
	sheet.rules;
	sheet.removeRule(0);//deleteRule
	sheet.addRule('body' ,'background-color:red',0);//insertRule
	
	//跨浏览器兼容
	var rules = sheet.cssRules||sheet.rules;
	deleteRule1(sheet ,0);
	insertRule1(sheet,'body','background-color:red',0);
}

//兼容浏览器删除第一条规则
function deleteRule1(sheet ,position){
	if (sheet.deleteRule) {
		sheet.deleteRule(position);
	} else if(sheet.removeRule){
		sheet.removeRule(position);
	}
}

//兼容浏览器的添加
function insertRule1(sheet,selectorText,cssText,position){
	if(sheet.insertRule){
		sheet.insertRule(selectorText+'{'+cssText+'}',position);
	}else if(sheet.addRule){
		sheet.addRule(selectorText,cssText,position);
	}
}
